import {useEffect, useState} from "react";

export default function EventFilter({handle}){
    const [categories, setCategories] = useState([])
    const [tags, setTags] = useState([])
    const [selectedTags,setSelectedTags] = useState(new Set([]))
    const [tagRel, setTagRel] = useState('Or')

    useEffect(() => {
        getTags()
        getCategories()
    }, []);
    async function getCategories(){
        const response = await fetch("http://127.0.0.1:8000/api/v1/categories")
        if(response.status===200){
            const data = (await response.json()).data
            setCategories(data.categories)
        }
    }
    async function getTags(){
        const response = await fetch("http://127.0.0.1:8000/api/v1/tags")
        if(response.status===200){
            const data = (await response.json()).data
            setTags(data.tags)
        }
    }

    function toggleTag(e){
        if(selectedTags.has(e.target.id)) {
            selectedTags.delete(e.target.id)
            e.target.classList.add("text-blue-800")
            e.target.classList.add("bg-blue-200")
            e.target.classList.remove("text-white")
            e.target.classList.remove("bg-blue-800")
        }
        else {
            selectedTags.add(e.target.id)
            e.target.classList.remove("text-blue-800")
            e.target.classList.remove("bg-blue-200")
            e.target.classList.add("text-white")
            e.target.classList.add("bg-blue-800")
        }
        console.log(selectedTags)
        setSelectedTags(selectedTags)
        handle('tags',selectedTags)

    }
    function changeRel(e){
        setTagRel(e.target.value)
        if(selectedTags.size>1){
            handle('tag_rel',e.target.value)
        }
    }

    return (
        <div className="bg-white p-6 rounded-lg shadow-md mb-6">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <div>
                    <label className="block text-gray-700 mb-2">Category</label>
                    <select id="category-filter" className="w-full p-2 border rounded"
                        onChange={(e)=>handle('category',e.target.value)}
                    >
                        <option value="">All Categories</option>
                        {categories.map(category => (
                            <option key={category.id} value={category.id}>{category.name}</option>
                        ))}

                    </select>
                </div>
                <div>
                    <label className="block text-gray-700 mb-2">Title / Description</label>
                    <input id="title-filter" onChange={e => handle('title', e.target.value, true)}
                           type="search" placeholder="Search by title / description..."
                           className="w-full p-2 border rounded"/>
                </div>
                <div>
                    <label className="block text-gray-700 mb-2">Start Time</label>
                    <input
                        onChange={e=>handle('start_at',e.target.value)}
                        id="start-time-filter" type="datetime-local" className="w-full p-2 border rounded"/>
                </div>
                <div>
                    <label className="block text-gray-700 mb-2">End Time</label>
                    <input
                        onChange={e=>handle('end_at',e.target.value)}
                        id="end-time-filter" type="datetime-local" className="w-full p-2 border rounded"/>
                </div>
            </div>
            <div className="mt-4">

                <label className="block text-gray-700 mb-2">Tags</label>
                <div className="w-full mb-4 flex gap-8">
                    <label htmlFor="or"><input
                        onChange={changeRel}
                        id="or" type="radio"  name="rel" value="Or" checked={tagRel==="Or"}/> Or </label>
                    <label htmlFor="and"><input
                        onChange={changeRel}
                        id="and" type="radio" name="rel" value="And"/> And </label>
                </div>
                <div id="tag-cloud" className="flex flex-wrap gap-2">
                    {tags.map(tag => (
                        <span key={tag.id} id={tag.id}
                              onClick={toggleTag}
                              className="bg-blue-200 text-blue-800 px-2 py-1 rounded cursor-pointer hover:bg-blue-300">{tag.name}</span>
                    ))}
                </div>
            </div>
        </div>
    );
}